import React from 'react';
import { TrendingUp, Users, Briefcase, Calendar, Award, ArrowUp, ArrowDown, Target, Clock } from 'lucide-react';

export default function Analytics() {
  const stats = [
    {
      name: '总候选人数',
      value: '1,247',
      change: '+12.5%',
      changeType: 'increase',
      icon: Users,
      color: 'bg-blue-500'
    },
    {
      name: '活跃岗位',
      value: '23',
      change: '+2',
      changeType: 'increase',
      icon: Briefcase,
      color: 'bg-green-500'
    },
    {
      name: '本月面试',
      value: '89',
      change: '-5.2%',
      changeType: 'decrease',
      icon: Calendar,
      color: 'bg-purple-500'
    },
    {
      name: '平均评分',
      value: '82.4',
      change: '+3.1%',
      changeType: 'increase',
      icon: Award,
      color: 'bg-orange-500'
    }
  ];

  const recruitmentFunnel = [
    { stage: '简历投递', count: 1247, percentage: 100 },
    { stage: '初筛通过', count: 623, percentage: 50 },
    { stage: '面试邀请', count: 312, percentage: 25 },
    { stage: '面试通过', count: 156, percentage: 12.5 },
    { stage: 'Offer发放', count: 89, percentage: 7.1 },
    { stage: '入职成功', count: 67, percentage: 5.4 }
  ];

  const topPositions = [
    { position: '前端工程师', applicants: 156, hired: 12, rate: '7.7%' },
    { position: 'Java工程师', applicants: 134, hired: 8, rate: '6.0%' },
    { position: 'UI设计师', applicants: 89, hired: 15, rate: '16.9%' },
    { position: '产品经理', applicants: 76, hired: 6, rate: '7.9%' },
    { position: '数据分析师', applicants: 45, hired: 3, rate: '6.7%' }
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900">数据看板</h1>
        <p className="mt-2 text-sm text-gray-700">
          招聘数据分析和关键指标监控
        </p>
      </div>

      {/* Key metrics */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {stats.map((stat) => {
          const Icon = stat.icon;
          return (
            <div key={stat.name} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">{stat.name}</p>
                  <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                </div>
                <div className={`p-3 rounded-lg ${stat.color}`}>
                  <Icon className="h-6 w-6 text-white" />
                </div>
              </div>
              <div className="mt-4 flex items-center">
                {stat.changeType === 'increase' ? (
                  <ArrowUp className="h-4 w-4 text-green-500 mr-1" />
                ) : (
                  <ArrowDown className="h-4 w-4 text-red-500 mr-1" />
                )}
                <span className={`text-sm font-medium ${
                  stat.changeType === 'increase' ? 'text-green-600' : 'text-red-600'
                }`}>
                  {stat.change}
                </span>
                <span className="text-sm text-gray-500 ml-2">较上月</span>
              </div>
            </div>
          );
        })}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Recruitment funnel */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-lg font-medium text-gray-900 flex items-center">
              <Target className="h-5 w-5 mr-2 text-blue-500" />
              招聘漏斗
            </h2>
            <span className="text-sm text-gray-500">最近30天</span>
          </div>
          
          <div className="space-y-4">
            {recruitmentFunnel.map((item, index) => (
              <div key={item.stage} className="relative">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium text-gray-700">{item.stage}</span>
                  <div className="flex items-center space-x-2">
                    <span className="text-sm font-medium text-gray-900">{item.count}</span>
                    <span className="text-xs text-gray-500">({item.percentage}%)</span>
                  </div>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div 
                    className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                    style={{ width: `${item.percentage}%` }}
                  ></div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Top positions */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-lg font-medium text-gray-900 flex items-center">
              <TrendingUp className="h-5 w-5 mr-2 text-green-500" />
              热门岗位
            </h2>
            <span className="text-sm text-gray-500">入职转化率</span>
          </div>
          
          <div className="space-y-4">
            {topPositions.map((position, index) => (
              <div key={position.position} className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
                <div className="flex items-center space-x-3">
                  <div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                    <span className="text-sm font-medium text-blue-600">{index + 1}</span>
                  </div>
                  <div>
                    <h3 className="text-sm font-medium text-gray-900">{position.position}</h3>
                    <p className="text-xs text-gray-500">{position.applicants} 位申请者</p>
                  </div>
                </div>
                <div className="text-right">
                  <span className="text-sm font-medium text-green-600">{position.rate}</span>
                  <p className="text-xs text-gray-500">{position.hired} 人入职</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Additional metrics */}
      <div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-medium text-gray-900">面试效率</h3>
            <Clock className="h-5 w-5 text-gray-400" />
          </div>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">平均安排时间</span>
              <span className="text-sm font-medium">2.3天</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">面试完成率</span>
              <span className="text-sm font-medium">87.5%</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">反馈及时率</span>
              <span className="text-sm font-medium">92.1%</span>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-medium text-gray-900">候选人来源</h3>
            <Users className="h-5 w-5 text-gray-400" />
          </div>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">招聘网站</span>
              <span className="text-sm font-medium">45%</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">内部推荐</span>
              <span className="text-sm font-medium">28%</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">社交媒体</span>
              <span className="text-sm font-medium">27%</span>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-medium text-gray-900">薪资分布</h3>
            <Award className="h-5 w-5 text-gray-400" />
          </div>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">10-20K</span>
              <span className="text-sm font-medium">35%</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">20-30K</span>
              <span className="text-sm font-medium">40%</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">30K+</span>
              <span className="text-sm font-medium">25%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}